<template>
    <div>
      <div class="scroll-container">
        <img :src="playList[this.playListIndex].al.picUrl" alt="" class="bgIMg">
        <div class="detailTop">

          <div class="detailLeft" @click="changePage">

            <svg class="icon-1" aria-hidden="true">
              <use xlink:href="#icon-zuojiantou"></use>
            </svg>

            <div>
              <p>
                {{ playList[this.playListIndex].al.name }}
              </p>
              <div class="detailLeft1">
                <span>{{ playList[this.playListIndex].ar[0].name }}</span>
                <svg class="icon-2" aria-hidden="true" @click="$router.go(-1)">
                            <use xlink:href="#icon-youjiantou1"></use>
                        </svg>
                    </div>
                </div>
            </div>
          <div class="detailRight">
            <svg class="icon-3" aria-hidden="true">
              <use xlink:href="#icon-lianjie"></use>
            </svg>
          </div>
        </div>
      <div class="detailContent" v-show="isLyricShow">
        <img src="@/assets/img/needle-ab.png" alt="" class="img_needle-ab"
             :class="{ 'img_needle-ab_active': !isBtnShow }"/>
        <img src="@/assets/img/bg.png" alt="" class="img_bg"/>
        <img alt="" @click="isLyricShow=true" :src="playList[this.playListIndex].al.picUrl" class="img_png"
             :class="[!isBtnShow ? 'img_png_active' : 'img_png_paused']"/>

      </div>
      <div class="detailLyric" ref="detailLyric" v-show="!isLyricShow">
        <p @click="isLyricShow=false" class="detailLyricDiv" v-for="(item,index) in lyric" :key="index" :class="{
                'active': (currentTime * 1000 >= item.time && currentTime * 1000 < item.pre)
            }">{{ item.lrc }}
        </p>

      </div>
      <div class="detailFooter">
        <div class="detailFooterTop">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-aixin"></use>
          </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai2"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinle"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-pinglun"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diandiandianshu"></use>
                </svg>
            </div>
            <div class="detailFooterContent">
              <input type="range" class="range" min="0" :max="this.duration"  step="0.05" v-model="this.currentTime">
            </div>
            <div class="detailFooterFooter">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xunhuan"></use>
                </svg>
                <svg class="icon" aria-hidden="true"  @click="goPlay(-1)"  >
                    <use xlink:href="#icon-shangyishoushangyige"></use>
                </svg>
                <svg class="icon-1" aria-hidden="true" @click="changePlayMusic" v-if="isBtnShow">
                    <use xlink:href="#icon-bofang2-copy"></use>
                </svg>
              <svg class="icon-1" aria-hidden="true"  @click="changePlayMusic" v-else>
                <use xlink:href="#icon-zanting-copy"></use>
              </svg>
                <svg class="icon" aria-hidden="true" @click="goPlay(1)">
                    <use xlink:href="#icon-xiayigexiayishou"></use>
                </svg>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiaomoshi"></use>
              </svg>

            </div>
        <audio ref="audio"
               :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
        <Play :id="this.playList[this.playListIndex].id" ref="playMusic"/>
      </div>
      </div>
    </div>
</template>

<script>
import Play from '@/views/Play/Play.vue'

import { mapMutations, mapState } from 'vuex'
export default {
    components: { Play},
    data() {
        return {
          isLyricShow: false,
          height: '',
          currentLyricIndex: 0,
          lyricItemHeight: 5,
          timerId: 0,

        }
    },
  updated() {

    if (this.isBtnShow === true) {
      clearInterval(this.timerId);
    }
  },

  mounted() {

    const lyricList = localStorage.getItem('lyrIcList');
    const durationList = localStorage.getItem('duration');
    const currentTimeList = localStorage.getItem('currentTime');
    if (lyricList) {
      this.$store.commit('updateLyricList', JSON.parse(lyricList));
      this.$store.commit('updateDuration', JSON.parse(durationList));
      this.$store.commit('updateCurrentTime', JSON.parse(currentTimeList));
    }
    this.$refs.playMusic.addCurrent();

  },

  methods: {
    ...mapMutations([
      'updatePlayList',
      'updatePlayListIndex',
      'updateDetailShow',
      'updateIsbtnShow',
      'updateLyricList',
      'updateDuration',
      'play']),
    scrollLyrics() {
      if (this.currentLyricIndex < this.lyric.length - 1) {
        this.index++;
        console.log([this.$refs.detailLyric.scrollTop]);
        this.$refs.detailLyric.scrollTop += this.lyricItemHeight;
      }
    },
    changePage() {
      this.$router.push('/layout/home');
    },
    goPlay(num) {
      let index = this.playListIndex + num;
      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index === this.playList.length) {
        index = 0;
      }

      this.updatePlayListIndex(index);
      this.play();

    },
    changePlayMusic() {
      this.$refs.playMusic.changePlay();
      // if(this.isBtnShow===false)
      // {
      //  this.timerId=  setInterval(() => {
      //   this.scrollLyrics();
      // }, 2000);}

    },

  },
  watch: {
    currentTime(newValue) {
      console.log('2', [this.$refs.detailLyric.scrollTop]);
      let p = document.querySelector('p.active');
      console.log('1', [p.offsetTop]);
      if (p.offsetTop > 300) {
        this.$refs.detailLyric.scrollTop = p.offsetTop - 300;
      }

      if (newValue === this.duration) {
        this.goPlay(+1);
      }
    },

  },
  created() {

  },
  computed: {
    ...mapState(['playList', 'playListIndex', 'isBtnShow', 'detailShow', 'lyrIcList', 'currentTime', 'duration']),

    lyric() {
      let arr;

      if (this.lyrIcList.lyric) {

        arr = this.lyrIcList.lyric.split(/\r?\n|(?<!\n)\r/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 9);
          let lrc = item.split(/\s*\n*\[.*?]\s*/).filter(v => !!v).toString();
          let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);


          return {min, sec, mill, lrc, time, i};

        });
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 1000000000;
          } else {
            item.pre = arr[i + 1].time;
                    }
                })
            }

          return arr;


        },




    },


    }
</script>
<style lang="less" scoped>
.scroll-container {
  height: 100vh;


}

.detailFooterContent {
  width: 90%;

  .range {
    width: 100%;
    height: 0.06rem;
  }
}

.detailLyric {

  width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  height: 300px;
  padding-top: 150px;

  p {
    font-size: 0.3rem;
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
    text-align: center;

  }
  .active {
    color: #fff;
    font-size: 0.5rem;

  }
}


.detailFooter {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 150px;
  position: fixed;
  bottom: 0px;
  position: fixed;

  width: 100%;
  z-index: 1;

  .detailFooterTop,
  .detailFooterFooter {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    width: 100%;

    .icon {
            width: 0.8rem;
            height: 0.8rem;

    }

    .icon-1 {
      width: 1.4rem;
      height: 1.4rem;
    }

  }
}

.bgIMg {
  overflow: hidden;
  height: 200%;
  position: fixed;
  z-index: -2;
  filter: blur(25px);
}

.bgIMg::before {
  /*纯白色的图片做背景, 歌词白色看不到了, 在背景前加入一个黑色半透明蒙层解决 */
  content: " ";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
}
.detailTop {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;

  .detailLeft,
  .detailRight {
    display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            font-size: 15px;
            color: white;
            margin-left: 10px;

        }



        .icon-1 {
            width: 0.9rem;
            height: 0.9rem;
        }


        .detailLeft1 {
            display: flex;
            align-items: center;

            span {
                font-size: 10px;

                margin-left: 10px;

            }

            .icon-2 {
                width: 0.4rem;
                height: 0.4rem;

            }
        }

        .icon-3 {
            width: 1rem;
            height: 1rem;
            margin-right: 20px;
        }
    }
}

.detailContent {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .img_needle-ab {
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(-30deg);
        transition: all 2s;
    }

    .img_needle-ab_active {
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(-3deg);
        transition: all 2s;
    }


    .img_bg {
        width: 6rem;
        height: 6rem;
        position: absolute;
        bottom: 1.5rem;
        z-index: -1;
    }

    .img_png {
        width: 3.8rem;
        height: 3.8rem;
        border-radius: 50%;
        position: absolute;
        bottom: 2.60rem;
        animation: identifier 10s linear infinite;
    }

    .img_png_active {
        animation-play-state: running;
    }

    .img_png_paused {
        animation-play-state: paused;
    }


}
</style>